import { Button, Space } from 'antd';
import { ExportOutlined, UndoOutlined, RedoOutlined, SaveOutlined } from '@ant-design/icons';

const BpmnToolBar = (props: any) => {
  const { bpmnModeler, onSave } = props;

  const exportDiagram = async () => {
    try {
      const result = await bpmnModeler.saveXML({ format: true });
      const { xml } = result;

      const xmlBlob = new Blob([xml], {
        type: 'application/bpmn20-xml;charset=UTF-8,'
      });

      const downloadLink = document.createElement('a');
      downloadLink.download = `bpmn-${+new Date()}.bpmn`;
      downloadLink.href = URL.createObjectURL(xmlBlob);
      downloadLink.style.display = 'none';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      downloadLink.remove();
    } catch (err) {
      console.log(err);
    }
  };

  const undo = () => {
    bpmnModeler.get('commandStack').undo();
  };
  const redo = () => {
    bpmnModeler.get('commandStack').redo();
  };
  return (
    <>
      <Space>
        <Button size="small" icon={<UndoOutlined />} title="撤销" onClick={undo}>
          撤销
        </Button>
        <Button size="small" icon={<RedoOutlined />} title="恢复" onClick={redo}>
          恢复
        </Button>
        <Button size="small" icon={<ExportOutlined />} title="导出" onClick={exportDiagram}>
          导出
        </Button>
        <Button
          size="small"
          icon={<SaveOutlined />}
          title="保存"
          onClick={() => {
            onSave();
          }}
        >
          保存
        </Button>
      </Space>
    </>
  );
};

export default BpmnToolBar;
